<template>
  <div class="resume-screening">
    <div class="header">
      <router-link to="/main/renshi/zhaoping/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>简历筛选</h2>
    </div>

    <div class="content">
      <el-table :data="resumeList" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="education" label="学历" width="120"></el-table-column>
        <el-table-column prop="experience" label="工作经验" width="120"></el-table-column>
        <el-table-column prop="position" label="应聘职位" width="150"></el-table-column>
        <el-table-column prop="submitTime" label="投递时间" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button size="mini" @click="viewResume(scope.row)">查看</el-button>
            <el-button size="mini" type="success" @click="passResume(scope.row)">通过</el-button>
            <el-button size="mini" type="danger" @click="rejectResume(scope.row)">淘汰</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 简历详情对话框 -->
    <el-dialog title="简历详情" :visible.sync="dialogVisible" width="50%">
      <div class="resume-detail" v-if="currentResume">
        <h3>{{ currentResume.name }} 的简历</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ currentResume.name }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ currentResume.gender }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ currentResume.age }}</el-descriptions-item>
          <el-descriptions-item label="学历">{{ currentResume.education }}</el-descriptions-item>
          <el-descriptions-item label="工作经验">{{ currentResume.experience }}</el-descriptions-item>
          <el-descriptions-item label="应聘职位">{{ currentResume.position }}</el-descriptions-item>
          <el-descriptions-item label="期望薪资">{{ currentResume.expectedSalary }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ currentResume.phone }}</el-descriptions-item>
          <el-descriptions-item label="电子邮箱">{{ currentResume.email }}</el-descriptions-item>
        </el-descriptions>
        <div class="resume-content">
          <h4>工作经历</h4>
          <p>{{ currentResume.workHistory }}</p>
          <h4>教育经历</h4>
          <p>{{ currentResume.educationHistory }}</p>
          <h4>自我评价</h4>
          <p>{{ currentResume.selfEvaluation }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      resumeList: [
        {
          id: 1,
          name: '张三',
          gender: '男',
          age: 28,
          education: '本科',
          experience: '3年',
          position: '前端开发工程师',
          submitTime: '2024-03-11 10:00:00',
          status: '待筛选',
          expectedSalary: '15k-20k',
          phone: '13800138000',
          email: 'zhangsan@example.com',
          workHistory: '2020-2023 XX科技公司 前端开发工程师',
          educationHistory: '2016-2020 XX大学 计算机科学与技术',
          selfEvaluation: '热爱技术，责任心强，有良好的团队协作能力'
        }
      ],
      dialogVisible: false,
      currentResume: null
    }
  },
  methods: {
    getStatusType(status) {
      const map = {
        '待筛选': 'info',
        '已通过': 'success',
        '已淘汰': 'danger'
      }
      return map[status] || 'info'
    },
    viewResume(row) {
      this.currentResume = row
      this.dialogVisible = true
    },
    passResume(row) {
      this.$confirm('确认通过该简历吗？')
        .then(() => {
          row.status = '已通过'
          this.$message.success('操作成功')
        })
        .catch(() => {})
    },
    rejectResume(row) {
      this.$confirm('确认淘汰该简历吗？')
        .then(() => {
          row.status = '已淘汰'
          this.$message.success('操作成功')
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.resume-screening {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .resume-detail {
    h3 {
      margin-bottom: 20px;
      text-align: center;
    }

    .resume-content {
      margin-top: 20px;

      h4 {
        margin: 15px 0 10px;
        color: #303133;
      }

      p {
        margin: 0;
        color: #606266;
        line-height: 1.6;
      }
    }
  }
}
</style> 